Description

Improves DocsShowCode component layout:

before	after

Allows example HTML and Vue code to be inserted verbatim, without escape sequences or eslint-disable directives:

-      <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
      <DocsShowCode language="html">
-        &lt;KGrid&gt;
-          &lt;KGridItem :layout12="{ span: 9 }"&gt;
-            &lt;h2&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/h2&gt;
-          &lt;/KGridItem&gt;
-          &lt;KGridItem :layout12="{ span: 3, alignment: 'right' }"&gt;
-            &lt;KButton text="Button" primary/&gt;
-          &lt;/KGridItem&gt;
-        &lt;/KGrid&gt;
+        <KGrid>
+          <KGridItem :layout12="{ span: 9 }">
+            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+          </KGridItem>
+          <KGridItem :layout12="{ span: 3, alignment: 'right' }">
+            <KButton text="Button" primary />
+          </KGridItem>
+        </KGrid>
      </DocsShowCode>
-      <!-- eslint-enable -->

(optional) Implementation notes

At a high level, how did you implement this?

• Adds a hack to resolve an issue related to the Vue component wrapper library around Prism which was preventing the prism-normalize-whitespace plugin from loading in some cases. Same issue as Using plugins egoist/vue-prism-component#10 (comment)
• Adds a new webpack loader which changes < and > to < and >. Same concept as https://github.com/Etheryte/vue-raw-pre

Does this introduce any tech-debt items?

This doesn't resolve the need to wrap javascript and CSS code sample blocks with eslint-disable/eslint-enable, because otherwise the code formatter treats them as HTML text nodes and flattens indentation. This might be fixable with a custom eslint plugin rule which can tell eslint/prettier to treat contents of DocsShowCode differently.

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change has been added to the changelog

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

Post-merge updates and tracking

• Learning Platform update PR is submitted
• Learning Platform update PR is merged
• Studio update PR is submitted
• Studio update PR is merged
• Data Portal update PR is submitted
• Data Portal update PR is merged

Comments